<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演唱会订票系统管理员首页</title>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #111;
            color: white;
        }

        /* 右侧主要内容区域整体样式 */
        main {
            margin-left: 200px;
            padding: 20px;
            background-color: #A5D6A7;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部区域样式 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        header h1 {
            font-size: 48px;
            color: white;
            background: linear-gradient(to right, #00f, #0ff, #0f0, #ff0, #f00);
            /* 定义从左到右的多彩线性渐变背景 */
            -webkit-background-clip: text;
            /* 以文字形状裁剪背景 */
            -webkit-text-fill-color: transparent;
            /* 让文字颜色透明，透出背景渐变颜色 */
            text-shadow: 0 0 5px #fff;
            /* 多重文字阴影营造发光感 */
            animation: glow 2s infinite alternate;
            /* 添加发光动画效果 */
        }

        @keyframes glow {
            from {
                text-shadow: 0 0 5px #fff;
            }

            to {
                text-shadow: 0 0 10px #fff;
                /* 动画过程中改变阴影强度，增强发光动态效果 */
            }
        }

        header time {
            font-size: 24px;
            color: #ff5a92;
        }

        /* 统计信息区域样式 */
        .stats-section {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-item h3 {
            margin-bottom: 5px;
        }

        /* 待办事项列表样式 */
        .todo-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .todo-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.2);
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
        }

        .todo-item input[type="checkbox"] {
            margin-right: 10px;
        }

        .todo-item button {
            background-color: transparent;
            border: none;
            color: #ff5a92;
            cursor: pointer;
            font-size: 16px;
        }

    </style>
</head>

<body>
<!-- 侧边栏 -->
<th:block th:insert="~{admin/header :: sidebar}"/>
<!-- 右侧主要内容区域 -->
<main>
    <!-- 头部区域 -->
    <header>
        <h1>欢迎管理员，祝您工作愉快！</h1>
        <time id="current-time"></time>
    </header>

    <!-- 统计信息区域 -->
        <div class="stats-section">
            <div class="stat-item">
                <h3>总用户数量</h3>
                <p th:text="${userL.size()}"></p>
            </div>
            <div class="stat-item">
                <h3>总演唱会数量</h3>
                <p th:text="${concertL.size()}"></p>
            </div>
            <div class="stat-item">
                <h3>总订单数量</h3>
                <p th:text="${orderL.size()}"></p>
            </div>
        </div>

    <!-- 待办事项列表 -->
    <h2>待办事项</h2>
    <ul class="todo-list">
        <li class="todo-item">
            <input type="checkbox">
            <span>审核用户注册信息</span>
            <button>删除</button>
        </li>
        <li class="todo-item">
            <input type="checkbox">
            <span>更新演唱会场次信息</span>
            <button>删除</button>
        </li>
        <li class="todo-item">
            <input type="checkbox">
            <span>处理退款申请</span>
            <button>删除</button>
        </li>
    </ul>
</main>

<script>
    const timeElement = document.getElementById('current-time');

    function updateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        timeElement.textContent = timeString;
    }

    updateTime();

    setInterval(updateTime, 1000);

    // 简单的待办事项勾选功能
    const todoCheckboxes = document.querySelectorAll('.todo-list input[type="checkbox"]');
    todoCheckboxes.forEach((checkbox) => {
        checkbox.addEventListener('change', function () {
            if (this.checked) {
                this.parentNode.style.textDecoration = 'line-through';
            } else {
                this.parentNode.style.textDecoration = 'none';
            }
        });
    });
</script>
</body>

</html>